<script setup>
import {useRouter,useRoute} from "vue-router";
import {ref} from "vue";
import {inject} from "vue";

var router = useRouter()
const activeMenu = router.currentRoute.value.path;
const globalVariable = inject('globalVariable')
var input = ref('')
const goToResultView = () => {
    input.value = globalVariable.value
    router.push({ name: 'resultView', params: { keyword: input.value } })
}
</script>

<template>
  <el-menu
      :default-active=activeMenu
      class="el-menu-demo"
      mode="horizontal"
      router
  >
    <el-menu-item @click="goToResultView">结果显示</el-menu-item>
<!--      <el-menu-item index="/echarts">图表显示</el-menu-item>-->
    &nbsp;&nbsp;&nbsp;&nbsp;
    <el-sub-menu index="">
      <template #title>搜索记录</template>
      <el-menu-item index="/searchRecordView">个人搜索记录</el-menu-item>
      <el-menu-item index="/hotRecordView">热词排行榜</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <router-view/>
</template>

<style scoped>
.el-menu-demo{
  width:80%;
  left:10%;
  padding-top: 10px;
}
</style>
